<template>
	<view>
		<div class="status-bar" :style="{height: statusBarHeight}">
			<status-bar></status-bar>
		</div>

		<jiaonang :bgcolor="bgcolor"></jiaonang>


		<!-- 分类 -->
		<view class="two-fenlei" :style="{marginTop: statusNav, top: statusNav}">
			<scroll-view class="fenlei" scroll-x enable-flex :scroll-into-view="'scroll' + current"
				scroll-with-animation>
				<view class="fenlei-item" v-for="(item, index) in aclass" @click="getData(item.id)" :key="item.id"
					:id="'scroll' + item.id">
					<view class="fenlei-con" @click="onClickItem(index)" :class="{active: current == index}">
						{{item.catename}}</view>
				</view>
			</scroll-view>

			<!-- <div class="scroll-nav">
				<scroll-nav :category="aclass"></scroll-nav>
			</div> -->

			<view class="pailie" @click="Switch">
				<text v-if="pailie == 'two'" class="iconfont icon-gonggepailie"></text>
				<text v-if="pailie == 'one'" class="iconfont icon-liebiaoshipailie"></text>
			</view>

		</view>

		<!-- 文章 @finishLoad="getLoadNum" -->
		<view v-if="pailie == 'two'">
			<wfalls-flow v-if='isLoad' :list="list" ref="wfalls"></wfalls-flow>
		</view>

		<view v-if="pailie == 'one'">
			<newspaper v-if='isLoad' :list="list" ref="wfalls"></newspaper>
		</view>

	</view>
</template>

<script>
	// const list = require('@/common/json/data.json').list;

	export default {
		data() {
			return {
				flag: 1,
				pailie: "one",
				id: 1,
				list: [],
				isNewRenderDone: false, //锁的作用
				isLoad: true,
				statusBarHeight: "",
				statusNav: "",
				bgcolor: "#edebee",
				current: 0,
				fenlei: "",
				aclass: [],
				loadId: 1
			}
		},
		components: {

		},
		methods: {
			Switch() {
				if (this.flag == 1) {
					this.pailie = "two"
					this.flag = 0;
				} else {
					this.pailie = "one";
					this.flag = 1;
				}
			},
			onClickItem(index) {
				this.current = index;
			},

			getData(id) {
				this.loadId = id;
				console.log(id);
				this.list = [];
				this.$refs.wfalls.init();
				uni.showLoading({
					title: '正在加载'
				})
				this.request('/index/article/' + id).then(res => {
					// console.log(res);
					this.list = res.data.data;
					uni.stopPullDownRefresh();
					uni.hideLoading();
					
					this.$refs.wfalls.init();

				})

			}

		},
		onPullDownRefresh() {
			let id = this.loadId;
			// this.getData(id);
			this.$refs.wfalls.init();
			uni.showLoading({
				title: '正在加载'
			})
			this.request('/index/article/' + id).then(res => {
				// console.log(res);
				this.list = res.data.data;
				uni.stopPullDownRefresh();
				uni.hideLoading();
				
				this.$refs.wfalls.init();
			
			})
			
		},
		mounted() {
			this.statusBarHeight = getApp().globalData.statusBar + "px";
			this.statusNav = getApp().globalData.statusNav + "px";
			this.fenlei = (getApp().globalData.statusNav + 55) * 2 + "rpx"
		},
		onLoad() {

			// uni.showLoading({
			// 	title: '正在加载',
			// 	time: 500
			// })
			// setTimeout(function() {
			// 	uni.hideLoading();
			// }, 500);
			// // 模拟首次加载列表数据
			// setTimeout(() => {
			// 	// this.list = list;
			// 	// this.$refs.wfalls.init();
			// }, 500)

			this.request('/index/aclass').then(res => {
				// console.log(res.data.data);
				this.aclass = res.data.data
			})
			uni.showLoading({
				title: '正在加载'
			})
			this.request('/index/article/1').then(res => {
				// console.log(res);
				this.list = res.data.data;
				this.$refs.wfalls.init();
				uni.hideLoading();
			})



		},

	}
</script>

<style scoped lang="scss">
	.status-bar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		background-color: #edebee;
	}

	.nav-bar {
		margin-bottom: 10px;
	}

	.two-fenlei {
		position: sticky;
		z-index: 5;
		display: flex;
		width: 100%;
		background-color: #edebee;
		justify-content: space-between;
		padding-right: 24rpx;
		box-sizing: border-box;
		align-items: center;

		.scroll-nav {
			flex: 1;
			width: 80%;
			padding-bottom: 20rpx;
			padding-top: 20rpx;
		}

		.fenlei {
			flex: 1;
			width: 80%;
			height: 70rpx;
			display: flex;
			white-space: nowrap;
			line-height: 70rpx;
			background-color: #edebee;
			padding: 20rpx 0;

			.fenlei-item {
				width: 100%;
				height: 70rpx;
				padding: 0 30rpx;
				font-size: 28rpx;

				.fenlei-con {
					padding: 0 20rpx;
					height: 70rpx;
					line-height: 70rpx;
					box-sizing: border-box;
				}

				.active {
					border-bottom: 2px solid #ff6d9f;
					color: #ff6d9f;
				}
			}
		}

		.pailie {
			width: 60rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			margin-left: 30rpx;

			text {
				font-size: 46rpx;
			}
		}

	}




	/deep/::-webkit-scrollbar {

		display: none;

		width: 0;

		height: 0;

		color: transparent;

		background: transparent;

	}
</style>
